<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： merchant_desktop.html
  ~ Date：18-10-11 下午5:16
  ~ Author: guomw
  -->

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桌面</title>

    <link href="../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}"/>
    <!-- Morris -->
    <link href="http://cdn.viptool.cn/lib/morris.js/0.4.3/morris.css" rel="stylesheet">
    <link href="../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>


    <link href="../resource/css/style.min.css?v=4.0.0" rel="stylesheet"
          th:href="@{/resource/css/style.min.css?v=4.0.0}"/>
    <link href="../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>


    <style>
        .panel-heading {
            font-size: 16px;
            font-weight: bold;
            width: 100%;
            border-bottom: 1px solid #ccc;
            margin: 0 20px;
        }
    </style>
</head>
<body>
<div class="row" th:if="${#authentication.getName().equals('admin')}">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content" style="border-top: none;">
                <div class="panel-heading">
                    今日订单数据
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="widget style1">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-trophy fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 今日收入 </span>
                                        <h2 class="font-bold" th:text="${'￥'+data.totalAmountT}">￥0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-bar-chart fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 成交订单总数 </span>
                                        <h2 class="font-bold" th:text="${data.totalNumT}">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-pie-chart fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 待支付订单总数 </span>
                                        <h2 class="font-bold" th:text="${data.totalNumToPayT}">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="widget style1 lazur-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-cny fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 待支付总金额 </span>
                                        <h2 class="font-bold"><span th:text="${data.totalAmountToPayT}">0</span></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!--                            onclick="hot.newTab(deliverUri,'销售订单')"-->
                            <div onclick="hot.newTab(deliverUri,'销售订单')" style="cursor: pointer"
                                 class="widget style1 yellow-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-bus fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 待发货 </span>
                                        <h2 class="font-bold" th:text="${data.toDeliverNum}">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!--                            onclick="hot.newTab(afterSaleUri,'售后申请')"-->
                            <div onclick="hot.newTab(afterSaleUri,'售后申请')" style="cursor: pointer"
                                 class="widget style1 red-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-paypal fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 退款中 </span>
                                        <h2 class="font-bold" th:text="${data.afterSaleNum}">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

<div class="row" th:if="${#authentication.getName().equals('admin')}">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content" style="border-top: none;">
                <div class="panel-heading">
                    昨日订单数据
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="widget style1">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-trophy fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 昨日收入 </span>
                                        <h2 class="font-bold" th:text="${'￥'+data.totalAmountY}">￥0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-bar-chart fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 成交订总单数 </span>
                                        <h2 class="font-bold" th:text="${data.totalNumY}">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-pie-chart fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 待支付订总单数 </span>
                                        <h2 class="font-bold" th:text="${data.totalNumToPayY}">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="widget style1 lazur-bg">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <i class="fa fa-cny fa-5x"></i>
                                    </div>
                                    <div class="col-xs-8 text-right">
                                        <span> 待支付总金额 </span>
                                        <h2 class="font-bold"><span th:text="${data.totalAmountToPayY}">0</span></h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row" th:if="${#authentication.getName().equals('admin')}">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content" style="border-top: none;">
                <div class="panel-heading">
                    用户数据
                </div>
                <div class="panel-body">

                    <div class="col-sm-3">
                        <div class="widget style1">
                            <div class="row">
                                <div class="col-xs-4">
                                    <i class="fa fa-trophy fa-5x"></i>
                                </div>
                                <div class="col-xs-8 text-right">
                                    <span> 平台用户总量 </span>
                                    <h2 class="font-bold"><span th:text="${userData.totalUserNum}">1231</span></h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="widget style1 red-bg">
                            <div class="row">
                                <div class="col-xs-4">
                                    <i class="fa fa-user fa-5x"></i>
                                </div>
                                <div class="col-xs-8 text-right">
                                    <span> 今日新增用户量 </span>
                                    <h2 class="font-bold"><span th:text="${userData.totalUserNumNew}">1231</span>
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="widget style1 yellow-bg">
                            <div class="row">
                                <div class="col-xs-4">
                                    <i class="fa fa-user fa-5x"></i>
                                </div>
                                <div class="col-xs-8 text-right">
                                    <span> 昨日新增用户量 </span>
                                    <h2 class="font-bold"><span th:text="${userData.totalUserNumNewY}">1231</span>
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" th:if="${#authentication.getName().equals('admin')}">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content" style="border-top: none;">
                <div class="panel-heading">
                    统计
                </div>
                <div class="panel-body" style="padding: 5px 31px;">
                    <div class="tabs-container" style="margin-top: 20px;">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a id="aTab1" data-toggle="tab" href="#tab-1" aria-expanded="true"> 交易金额</a>
                            </li>
                            <li>
                                <a id="aTab2" data-toggle="tab" href="#tab-2" aria-expanded="true"> 订单数量</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body table-responsive">
                                    <div id="statistic_container" style="width: 100%;height:400px;">

                                    </div>

                                    <div style="padding:0px 15px;margin-top: 15px;" class="table-responsive">
                                        <a id="more_data1" style="float: right">更多</a>
                                        <table class="table table-bordered table-hover table-center">
                                            <thead>
                                            <tr>
                                                <th>时间</th>
                                                <th>已支付</th>
                                                <th>待支付</th>
                                                <th>退款金额</th>
                                                <th>微信支付</th>
                                                <th>支付宝支付</th>
                                                <th>余额支付</th>
                                                <th>微信退款</th>
                                                <th>支付宝退款</th>
                                                <th>余额退款</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            <tr th:each="item:${dealAmount}">
                                                <td th:text="${item.date}"></td>
                                                <td th:text="${item.payedAmount}"></td>
                                                <td th:text="${item.unpayAmount}"></td>
                                                <td th:text="${item.refundAmount}"></td>
                                                <td th:text="${item.wechatAmount}"></td>
                                                <td th:text="${item.alipayAmount}"></td>
                                                <td th:text="${item.balanceAmount}"></td>
                                                <td th:text="${item.wechatRefund}"></td>
                                                <td th:text="${item.alipayRefund}"></td>
                                                <td th:text="${item.balanceRefund}"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body table-responsive">
                                    <div id="statistic_container2" style="width: 100%;height:400px;">

                                    </div>

                                    <div style="padding:0px 15px;margin-top: 15px;" class="table-responsive">
                                        <a id="more_data2" style="float: right">更多</a>

                                        <table class="table table-bordered table-hover table-center">
                                            <thead>
                                            <tr>
                                                <th>时间</th>
                                                <th>已支付</th>
                                                <th>待支付</th>
                                                <th>退款数</th>
                                                <th>普通订单数</th>
                                                <th>普通（直播）</th>
                                                <th>拍卖（直播）</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            <tr th:each="item:${orderCount}">
                                                <td th:text="${item.date}"></td>
                                                <td th:text="${item.payedCount}"></td>
                                                <td th:text="${item.unpayCount}"></td>
                                                <td th:text="${item.refundCount}"></td>
                                                <td th:text="${item.normalCount}"></td>
                                                <td th:text="${item.normalLiveCount}"></td>
                                                <td th:text="${item.auctionLiveCount}"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


<script src="../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316(123123)}"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

<script type="text/javascript" th:inline="javascript">
    const deliverUri = /*[[@{/order/list(deliverStatus=0)}]]*/ "";
    const afterSaleUri = /*[[@{/order/afterSale/list(status=1)}]]*/ "";
    const dates = /*[[${dates}]]*/ ['2020-10-01', '周二', '周三', '周四', '周五', '周六', '周日'];
    const data1 =/*[[${dealAmount}]]*/ "";
    const data2 =/*[[${orderCount}]]*/ "";
    const dealAmountUri = /*[[@{/statistics/order/dealAmount}]]*/  "";
    const orderCountUri = /*[[@{/statistics/order/count}]]*/  "";
</script>
<script>
    $(function () {
        $("#aTab2").click(function () {
            setTimeout(function () {
                statisticsHandle.initChart2();
            }, 200);
        });

        $("#aTab1").click(function () {
            statisticsHandle.initChart1();
        });


        $("#more_data1").click(function () {
            hot.iframeModal(dealAmountUri, window.innerWidth * 0.8 + "px", window.innerHeight * 0.9 + "px", '详细信息');
        });

        $("#more_data2").click(function () {
            hot.iframeModal(orderCountUri, window.innerWidth * 0.8 + "px", window.innerHeight * 0.9 + "px", '详细信息');
        });

        statisticsHandle.init();
    });

    var statisticsHandle = {
        payed: [],
        unpayed: [],
        refund: [],
        wechat: [],
        alipay: [],
        balance: [],
        wechatRefund: [],
        alipayRefund: [],
        balanceRefund: [],
        payedCount: [],
        unpayedCount: [],
        refundCount: [],
        normalCount: [],
        normalLiveCount: [],
        auctionLiveCount: [],
        initChart1Data: function () {
            let self = this;
            // let data1Json = JSON.parse(data1);
            $.each(data1, function (o, item) {
                self.payed.push(parseFloat(item.payedAmount).toFixed(2));
                self.unpayed.push(parseFloat(item.unpayAmount).toFixed(2));
                self.refund.push(parseFloat(item.refundAmount).toFixed(2));
                self.wechat.push(parseFloat(item.wechatAmount).toFixed(2));
                self.alipay.push(parseFloat(item.alipayAmount).toFixed(2));
                self.balance.push(parseFloat(item.balanceAmount).toFixed(2));
                self.wechatRefund.push(parseFloat(item.wechatRefund).toFixed(2));
                self.alipayRefund.push(parseFloat(item.alipayRefund).toFixed(2));
                self.balanceRefund.push(parseFloat(item.balanceRefund).toFixed(2));
            });
        },
        initChart2Data: function () {
            let self = this;
            $.each(data2, function (o, item) {
                self.payedCount.push(item.payedCount);
                self.unpayedCount.push(item.unpayCount);
                self.refundCount.push(item.refundCount);
                self.normalCount.push(item.normalCount);
                self.normalLiveCount.push(item.normalLiveCount);
                self.auctionLiveCount.push(item.auctionLiveCount);
            })
        },
        init: function () {
            this.initChart1Data();
            this.initChart1();

            this.initChart2Data();
            this.initChart2()
        },
        initChart1: function () {
            let self = this;
            let chart = echarts.init(document.getElementById('statistic_container'));
            let option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['已支付', '待支付', '退款', '微信支付', '支付宝支付', '余额支付', '微信退款', '支付宝退款', '余额退款'],
                    selected: {
                        '微信支付': false,
                        '支付宝支付': false,
                        '余额支付': false,
                        '微信退款': false,
                        '支付宝退款': false,
                        '余额退款': false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {}
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dates
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '已支付',
                        type: 'line',
                        data: self.payed
                    },
                    {
                        name: '待支付',
                        type: 'line',
                        data: self.unpayed
                    },
                    {
                        name: '退款',
                        type: 'line',
                        data: self.refund
                    },
                    {
                        name: '微信支付',
                        type: 'line',
                        data: self.wechat
                    },
                    {
                        name: '支付宝支付',
                        type: 'line',
                        data: self.alipay
                    },
                    {
                        name: '余额支付',
                        type: 'line',
                        data: self.balance
                    },
                    {
                        name: '微信退款',
                        type: 'line',
                        data: self.wechatRefund
                    },
                    {
                        name: '支付宝退款',
                        type: 'line',
                        data: self.alipayRefund
                    },
                    {
                        name: '余额退款',
                        type: 'line',
                        data: self.balanceRefund
                    }
                ]
            };
            chart.clear();
            chart.setOption(option);
        },
        initChart2: function () {
            let self = this;

            let chart2 = echarts.init(document.getElementById('statistic_container2'));

            let option2 = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['已支付', '待支付', '退款', '普通订单', '普通（直播）', '拍卖（直播）'],
                    selected: {
                        '普通订单': false,
                        '普通（直播）': false,
                        '拍卖（直播）': false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {}
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dates
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '已支付',
                        type: 'line',
                        data: self.payedCount
                    },
                    {
                        name: '待支付',
                        type: 'line',
                        data: self.unpayedCount
                    },
                    {
                        name: '退款',
                        type: 'line',
                        data: self.refundCount
                    },
                    {
                        name: '普通订单',
                        type: 'line',
                        data: self.normalCount
                    },
                    {
                        name: '普通（直播）',
                        type: 'line',
                        data: self.normalLiveCount
                    },
                    {
                        name: '拍卖（直播）',
                        type: 'line',
                        data: self.auctionLiveCount
                    }
                ]
            };
            chart2.clear();
            chart2.setOption(option2);
            chart2.resize();
        }
    };
</script>
</body>
</html>